/**
 * @description 出卡啦市集/文章详情
 */
import style from './styles/ArticleDetail.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Button, Toast } from 'wd-mobile';
import copy from 'copy-to-clipboard';
import ShareOrPayLayer from "components/ShareOrPayLayer";

import icon_like from "images/icon/like.png";
import icon_like_active from "images/icon/like_active.png";
import icon_zan from "images/icon/zan.png";
import icon_zan_active from "images/icon/zan_active.png";
import logo from "images/logo.png";

import { query_detail, collect, del_collect, cancel_like_question, like_question } from "api_xukaiyu/app/content";

import util from "commons/util";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showShareOrPayLayer: false,
            detail: {}
        }
    }
    componentDidMount() {
        query_detail({
            articleId: this.props.match.params.articleId
        }).then(res => {
            this.setState({
                detail: res.data
            },()=>{
                wx.ready(() => {
                    const shareData = {
                        title: this.state.detail.articleTitle,
                        desc: "发现了一篇不错的文章，推荐给你看看",
                        link: location.href,
                        imgUrl: logo,
                        success: () => { },
                        cancel: () => { }
                    };
        
                    wx.onMenuShareAppMessage(shareData); //分享给朋友
                    wx.onMenuShareTimeline(shareData); //分享到朋友圈
                    wx.onMenuShareQQ(shareData); //分享到QQ
                    wx.onMenuShareWeibo(shareData); //分享到微博
                    wx.onMenuShareQZone(shareData); //分享到QZone 
                });
            })
        })
    }
    render() {
        return (
            <Fragment>

                <div className={classnames(style.main, "x-scroll-y")}>
                    <div className={style.kv} style={this.state.detail.articlePic ? { backgroundImage: `url(${this.state.detail.articlePic})` } : {}}>
                        <div className={style.kvLayer}></div>
                        <div className={style.kvInfo}>
                            <div className={style.articleTitle}>
                                {this.state.detail.articleTitle}
                            </div>
                            <div className={style.articleInfo}>
                                <div className={style.articleAuthor}>作者：{this.state.detail.author}</div>
                                <div className={style.articleDate}>{this.state.detail.publishTime ? this.state.detail.publishTime.replace(/\//g, "-") : ""}</div>
                            </div>
                        </div>
                    </div>
                    <div className={style.articleContent} dangerouslySetInnerHTML={{ __html: this.state.detail.articleContent }}></div>
                </div>
                <div className={style.toolList}>
                    <div className={style.likeAndZan}>
                        <div className={style.like} onClick={() => {
                            // 切换收藏状态
                            if (!this.state.detail.collected) {
                                collect({
                                    articleId: this.props.match.params.articleId
                                }).then(res => {
                                    const detail = { ...this.state.detail };
                                    detail.collected = true;
                                    this.setState({
                                        detail: detail
                                    })
                                    Toast.info("已收藏");
                                })
                            } else {
                                del_collect({
                                    articleId: this.props.match.params.articleId
                                }).then(res => {
                                    const detail = { ...this.state.detail };
                                    detail.collected = false;
                                    this.setState({
                                        detail: detail
                                    })
                                    Toast.info("已取消收藏");
                                })
                            }
                        }}>
                            <img src={this.state.detail.collected ? icon_like_active : icon_like} alt="" />
                            <span>{this.state.detail.collected ? "已收藏" : "收藏"}</span>
                        </div>
                        <div className={style.zan} onClick={() => {
                            // 切换收藏状态
                            if (!this.state.detail.liked) {
                                like_question({
                                    articleId: this.props.match.params.articleId
                                }).then(res => {
                                    const detail = { ...this.state.detail };
                                    detail.liked = true;
                                    this.setState({
                                        detail: detail
                                    })
                                    Toast.info("已点赞");
                                })
                            } else {
                                cancel_like_question({
                                    articleId: this.props.match.params.articleId
                                }).then(res => {
                                    const detail = { ...this.state.detail };
                                    detail.liked = false;
                                    this.setState({
                                        detail: detail
                                    })
                                    Toast.info("已取消点赞");
                                })
                            }
                        }}>
                            <img src={this.state.detail.liked ? icon_zan_active : icon_zan} alt="" />
                            <span>{this.state.detail.liked ? "已点赞" : "点赞"}</span>
                        </div>
                    </div>
                    <Button className={style.button} onClick={() => {
                        if (util.isWeixin()) {
                            this.setState({
                                showShareOrPayLayer: true
                            })
                        } else {
                            copy(location.href);
                            Toast.info("分享链接已复到剪切板", 1500);
                        }
                    }}>分享</Button>
                </div>
                <ShareOrPayLayer show={this.state.showShareOrPayLayer} onClick={() => {
                    this.setState({
                        showShareOrPayLayer: false
                    })
                }} />
            </Fragment>
        )
    }
}

export default App;